<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业</title>
		<script src="../vue@3.2.23.js"></script>
		<style>
			body{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100vw;
				height: 100vh;
				position: absolute;
				background-color: rgba(000, 000, 000, 0.4);
				left: 0px;
				top: 0px;
				display: flex;
				/* 横轴 */
				justify-content: center;
				/* 纵轴 */
				align-items: center;
			}
			.pop{
				padding: 20px;
				display: flex;
				/* 横轴 */
				justify-content: space-between;
				/* 纵轴 */
				align-items: flex-end;
				/* 元素排列方式 */
				flex-direction: column;
				width: 500px;
				height: 500px;
				border: 1px solid red;
			}
			button{
				color: aliceblue;
			}
			.danger{
				background-color: red;
			}
			.warn{
				background-color: yellowgreen;
			}
			.info{
				background-color: green;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			
			<pop v-if="isShow" v-model="isShow" :present="present"></pop>
			<table border="1">
				<tr>
					<td>序号</td>
					<td>名称</td>
					<td>价格</td>
					<td>数量</td>
					<td>总价</td>
					<td>操作</td>
				</tr>
				<tr v-for="i,index in goods">
					<td>{{index}}</td>
					<td>{{i.name}}</td>
					<td>{{i.price}}</td>
					<td>{{i.num}}</td>
					<td>{{i.all}}</td>
					<td>
						<button v-for="j,index in btnConfig" v-text="j.text" :class="j.className" @click="show(j.text)"></button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script>
	const app=Vue.createApp({
		data() {
			
			return{
				present:undefined,
				btnConfig:[
					{
						text:'添加',
						className:{'info':true}
					},
					{
						text:'减少',
						className:{'warn':true}
					},
					{
						text:'删除',
						className:{'danger':true}
					},
					{
						text:'修改',
						className:{'warn':true}
					}
				],
				goods:[{
					name:'红茶',
					price:8,
					num:0,
					all:0
				},{
					name:'绿茶',
					price:8,
					num:0,
					all:0
				},{
					name:'冰红茶',
					price:8,
					num:0,
					all:0
				}],
				isShow:false
			}
		},
		methods:{
			show(text){
				console.log(text)
				this.present=text
				this.isShow=true
			}
		}
	})
	app.component('pop',{
		props:['modelValue','present'],
		data() {
			return{
				msg:this.present
			}
		},
		updated(){
			console.log("子组件"+this.msg)
		},
		
		template:`
			<div class="box">
				<div class="pop">
					<div  @click='this.$emit("update:modelValue",false)'>x</div>
					<div>进行了{{present}}操作</div>
					<div>
						<button :class='{info:true}' @click='this.$emit("update:modelValue",false)'>确认</button>
						<button :class='{warn:true}' @click='this.$emit("update:modelValue",false)'>取消</button>
					</div>
				</div>
			</div>
		`
	})
	const vm=app.mount('#app')
</script>